1 Why SVG?

Vector graph keeps its smoothness at any resolution.

2 Using SVG element

<svg height="400" width="500"></svg>

All shapes and drawings are be child element of a parent svg element.

It can take a width attribute for width on webpage.

It can take a height attribute for height on webpage.

The x direction is horizontal with upper left as zero and pointing rightward as positive.

The y direction is vertical with upper left as zero and pointing downward as positive.

3 <line>for straight line

<line
  x1="0"
  y1="0"
  x2="100"
  y2="100"
  stroke="black"
  stroke-width="10"
></line>

x1 is the x-coordinate of starting point.

y1 is the y-coordinate of starting point.

x2 is the x-coordinate of ending point.

y2 is the y-coordinate of ending point.

stroke is the color of the line.

stroke-width is the thickness of the line.

4 <rect>for rectangle

<rect
  x="100"
  y="100"
  width="200"
  height="200"
  rx="50"
></rect>

x is the x-coordinate of upper left corner.

y is the y-coordinate of upper left corner.

width is the width of the rectangle.

height is the height of the rectangle.

rx is the round corner radius.rx is optional.

5 <circle>for circle

<circle>cx="300"
  cy="50"
  r="40"
></circle>

cx is the x-coordinate of center.

cy is the y-coordinate of center.

r is radius

6 <ellipse>for ellipse

<ellipse
  cx="50"
  cy="200"
  rx="30"
  ry="80"
></ellipse>

cx is the x-coordinate of center.

cy is the y-coordinate of center.

rx is the x-radius or width of the shape.

ry is the y-radius or height of the shape.